<template>
  <div :class="{
    'right-panel': true,
    'right-panel-dark': isDarkTheme,
    'right-panel-light': isDarkTheme
  }" >
    <TopPart
      :pageConfig="pageConfig"
      @handleRowClick="handleRowClick"
    />
    <CenterPart
      :pageConfig="pageConfig"
      @handleOpenProcessing="handleOpenProcessing"
    />
    <BottomPart
      :pageConfig="pageConfig"
      @handleOpenUnDealNum="handleOpenUnDealNum"
    />
    <!-- 预警信息下钻 -->
    <WarningInfoDetail
      ref="warningInfoDetail"
      :pageConfig="pageConfig"
    />

    <!-- 平均处理时长 -->
    <AverageProcess
      ref="averageProcess"
      :pageConfig="pageConfig"
    />

    <!-- 未处理表单到达时间分布 -->
    <UnDealNum
      ref="unDealNum"
      :pageConfig="pageConfig"
    />


  </div>
</template>

<script>
import TopPart from './TopPart.vue';
import CenterPart from './CenterPart.vue';
import BottomPart from './BottomPart.vue';
import AverageProcess from '../DrillPages/AverageProcess.vue';
import UnDealNum from '../DrillPages/UnDealNum.vue';
import WarningInfoDetail from '../DrillPages/WarningInfoDetail.vue';



export default {
  props: {
    pageConfig: Object
  },
  components: {
    TopPart,
    CenterPart,
    BottomPart,
    AverageProcess,
    UnDealNum,
    WarningInfoDetail,
  },
  data() {
    return {
      title: '处理单量及通过率'
    }
  },

  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleRowClick(row) {
      this.$refs.warningInfoDetail.handleOpen(row);
    },
    handleOpenProcessing(name) {
      this.$refs.averageProcess.handleOpen(name)
    },
    handleOpenUnDealNum(name) {
      this.$refs.unDealNum.handleOpen(name)
    }
  }

}
</script>

<style lang="less" scoped>
  .right-panel {
    height: 100%;
  }
</style>